<template>
  <div class="animation-box">
    <!-- 特效 -->
    <canvas class="w-screen h-screen"></canvas>

    <!-- 人像 -->
    <div class="animation-box-head">
      <div class="animation-box-head-img w-32 h-32 rounded-[50%]">
        <div class="face">
          <div class="eyes">
            <div class="eye"></div>
            <div class="eye"></div>
          </div>
        </div>
      </div>

      <div
        class="animation-box-head-word pointer text-3xl text-center mt-6 text-[#fff] font-[700]"
        @click="$mitt.emit('scrollToNextSection', 999)"
      >
        <div>Hello! I'm wang chun zheng</div>
        <div class="mt-[20px]">一个热爱前端的全栈小胖子</div>
      </div>
    </div>

    <!-- 点击滚动到第二页 -->
    <div
      class="ellipse w-[24px] h-[38px]"
      @click="$mitt.emit('scrollToNextSection', 999)"
    >
      <div class="dot w-[8px] h-[8px] bg-[#fff] rounded-[50%]"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { $mitt } = useNuxtApp();

// 初始化
const init = () => {
  useAnimationInit();
  usePortrait();
};

init();
</script>

<style lang="less" scoped>
.animation-box {
  height: 100vh;
  position: relative;

  .animation-box-head {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%);

    .animation-box-head-img {
      background-color: #ffffff;
      border: 6px solid #fff;
      box-shadow: 0 0 10px #fff;
      margin: 0 auto;
    }

    .animation-box-head-word {
      font-family: "Microsoft YaHei";
      text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
        -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c; /*设置文字阴影*/
      -webkit-animation: flame 2s infinite; /*设置动画*/
    }
  }

  .ellipse {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #fcfcfe;
    border-radius: 15px;
    cursor: pointer;

    .dot {
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: dot-animation 2s infinite ease-in-out;
    }
  }
}

.face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #ffcc09;
  justify-content: center;
  align-items: center;
}

.face::before {
  content: "";
  position: absolute;
  top: 80px;
  width: 40px;
  height: 20px;
  background: #b57700;
  left: 45px;
  border-bottom-left-radius: 70px;
  border-bottom-right-radius: 70px;
  transition: 0.5s;
}

.face:hover::before {
  top: 80px;
  width: 40px;
  height: 20px;
  background: #b57700;
  left: 45px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.eyes {
  position: relative;
  top: 20px;
  left: 5px;
  display: flex;

  .eye {
    position: relative;
    width: 30px;
    height: 30px;
    display: block;
    background: #fff;
    margin: 0 15px;
    border-radius: 50%;
  }

  .eye::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    background: #333;
    border-radius: 50%;
  }
}

@keyframes dot-animation {
  0% {
    top: 5%;
    opacity: 1;
  }
  50% {
    top: 50%;
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

@-webkit-keyframes flame {
  /*创建动画*/
  0% {
    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c;
  }
  30% {
    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 10px -90px 80px #f38e1c;
  }
  60% {
    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0px -80px 100px #f38e1c;
  }
  100% {
    text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85,
      -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, 0 -80px 70px #f38e1c;
  }
}
</style>
